<template>
  <div class="cluster recovery">
    <a-card style="width:100%">
      <p slot="title" class="cardTitles">
        <span>申请管理</span>
        <a-button type="primary" @click="addUser()">新增</a-button>
        <a-button type="danger">删除</a-button>
      </p>
      <div class="formDiv">
        <a-form layout="inline" :form="form">
          <a-form-item>
            <div class="search">
              <a-icon type="double-right" />快速查询：
            </div>
          </a-form-item>
          <a-form-item>
            <a-select v-model="keyName" style="width:130px">
              <a-select-option value="2">全部</a-select-option>
              <a-select-option value="title">名字</a-select-option>
              <a-select-option value="moduleName">手机号</a-select-option>
              <a-select-option value="moduleName1">单位信息</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-input v-model="keywords" type="text" style="width: 180px;" />
          </a-form-item>
          <a-form-item>
            <a-button @click="search()" type="primary">搜索</a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="reset()">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div style="margin-top:10px">
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="list"
          rowKey="id"
          :pagination="pagination"
          @change="changePage"
        >
          <template slot-scope="text,record" slot="action">
            <a class="tools" @click="audit(record)">审核</a>
            <a class="tools" type="link" @click="formItemDelete(record)">查看</a>
            <a class="tools" @click="retweet(record)">编辑</a>
            <a class="tools" type="link" @click="formItemDelete(record)">删除</a>
          </template>
        </a-table>
      </div>
    </a-card>
    <div class="modal-content">
      <!-- 新增 -->
      <a-modal
        title="信息填报"
        width="800px"
        centered
        :visible="userinformVisible"
        :maskClosable="false"
        okText="确定"
        @ok="submitInform('form')"
        @cancel="close"
      >
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          v-bind="formLayout"
          class="inform-form"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item label="用户名" prop="loginName">
                <a-input v-model="form.loginName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="密码" prop="password">
                  <a-input-password v-model="form.password"></a-input-password>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item has-feedback label="手机号" prop="mobile">
                <a-input v-model="form.mobile" autocomplete="off" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item has-feedback label="单位信息" prop="unit">
                <a-input v-model="form.unit" autocomplete="off" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item has-feedback label="邮箱" prop="email">
                <a-input v-model="form.email" autocomplete="off" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item has-feedback label="渠道" prop="posttalAddress">
                <a-input v-model="form.posttalAddress" autocomplete="off" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item has-feedback label="用户类型" prop="userType">
                <a-radio-group v-model="form.userType">
                  <a-radio value="独立机构">独立机构</a-radio>
                  <a-radio value="普通用户">普通用户</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item has-feedback label="机构名称" prop="nickName" v-if="form.userType === '独立机构'">
                <a-select
                  show-search
                  v-model="form.nickName"
                  @search="handleSearch"
                  @change="handleChange"
                  @blur="handleChangeBlur"
                >
                  <a-select-option value="jack">Jack</a-select-option>
                  <a-select-option value="lucy">Lucy</a-select-option>
                  <a-select-option value="tom">Tom</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item
                has-feedback
                label="是否短信"
                prop="intro"
                :label-col="{span:3}"
                :wrapper-col="{span:21}"
              >
               <a-switch v-model="form.checked"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <template slot="footer">
          <a-button @click="storge()">暂存</a-button>
          <a-button type="primary" @click="submitInform('form')">确定</a-button>
        </template>
      </a-modal>
      <!-- 审核 -->
      <a-modal
        title="申请审核"
        width="600px"
        centered
        :visible="userApplicationVisible"
        :maskClosable="false"
        @cancel="closeApplicationModal"
      >
        <div>
          <a-descriptions bordered :column="1" >
              <a-descriptions-item label="用户名"></a-descriptions-item>
              <a-descriptions-item label="手机号"></a-descriptions-item>
              <a-descriptions-item label="单位信息"></a-descriptions-item>
              <a-descriptions-item label="邮件"></a-descriptions-item>
              <a-descriptions-item label="渠道"></a-descriptions-item>
              <a-descriptions-item label="申请时间">2020年12-12</a-descriptions-item>
              <a-descriptions-item label="用户类型">独立用户</a-descriptions-item>
              <a-descriptions-item label="是否短信"> 
                <a-switch :disabled="disabled" v-model="form.checked"/>
              </a-descriptions-item>
          </a-descriptions>
        </div>
        <template slot="footer">
          <a-button>不通过</a-button>
          <a-button type="primary">通过</a-button>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { paging } from "assets/js/mixin";
import { recycle } from "@/api/operations";
export default {
  mixins: [paging],
  data() {
    return {
      disabled:true,
      userinformVisible: false,
      userApplicationVisible:false,
      keyName: "2",
      keywords: "",
      numbers: 0,
      selectedRowKeys: [],
      columns: [
        {
          title: "用户名",
          dataIndex: "userName",
          scopedSlots: { customRender: "moduleName1" }
        },
        {
          title: "手机号",
          dataIndex: "telephoneNumber",
          scopedSlots: { customRender: "objectName" }
        },
        {
          title: "单位信息",
          dataIndex: "unit"
        },
        {
          title: "申请时间",
          dataIndex: "applicationTime"
        },
        {
          title: "邮件",
          dataIndex: "email"
        },
        {
          title: "渠道",
          dataIndex: "channel"
        },
        {
          title: "用户类型",
          dataIndex: "userType"
        },
        {
          title: "状态",
          dataIndex: "statu"
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      list: [
        {
          userName: "测试11",
          telephoneNumber: "1111111",
          unit: "xxxxxx",
          applicationTime: "2020-12-13",
          email: "1104735883@qq.com",
          channel: "线上",
          userType: "普通用户",
          statu: "待审核",
          id: 111111
        }
      ],
      rules: {
        unitList: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        cname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        trustNo: [{ required: true, message: "请输入信任号", trigger: "blur" }]
      },
      formLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      form: {
        id: "",
        password: "",
        checked:true,
        userType:'独立机构',
        unit:'',
        unitList: [],
        cname: undefined,
        trustNo: undefined,
        email: "",
        birth: "",
        duty: undefined,
        fax: "",
        hphone: "",
        intro: "",
        loginName: "",
        mobile: "",
        mobileOther: "",
        msnqq: "",
        nickName: "11111",
      },
      inputValue:''
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "forms" });
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //新增用户
    addUser() {
      this.userinformVisible = true;
    },
    close() {
      this.userinformVisible = false;
    },
    closeApplicationModal(){
       this.userApplicationVisible = false;
    },
    handleSearch(value){
      this.inputValue = value
      console.log(this.inputValue)
    },
    handleChange(value){
     console.log(this.inputValue)
    },
    handleChangeBlur(value){
      console.log(this.inputValue)
    },
    getlist() {
      //获取 回收站数据
      var params = {
        keyName: "",
        keywords: this.keywords,
        objDTO: {
          moduleName: "",
          title: ""
        },
        order: true,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sort: ""
      };
      if (this.keyName != 2) {
        params.keyName = this.keyName;
      }
    },
    search() {
      //搜索
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getlist();
    },
    reset() {
      //重置
      this.keyName = "2";
      this.keywords = "";
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getlist();
    },
    audit(record){
      console.log(record)
      this.userApplicationVisible = true
    },
    retweet(record) {
      //列表单个恢复操作
      var _this = this;
      this.$confirm({
        title: "您是否确认要操作所选中的记录？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          recycle
            .restore(record.id)
            .then(() => {
              _this.$message.success("操作成功");
              _this.deleteAfterPageNum();
              _this.getlist();
            })
            .catch(err => {
              _this.$message.error(err);
            })
            .finally(() => {});
        }
      });
    },
    formItemDelete(record) {
      //列表删除操作
      var _this = this;
      this.$confirm({
        title: "您是否确认要删除所选中的记录？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          recycle
            .delete(record.id)
            .then(() => {
              _this.$message.success("操作成功");
              _this.deleteAfterPageNum();
              _this.getlist();
            })
            .catch(err => {
              _this.$message.error(err);
            })
            .finally(() => {});
        }
      });
    },
    changePage(pagination) {
      //分页
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getlist();
    },
    onSelectChange(selectedRowKeys) {
      //列表多选操作
      this.selectedRowKeys = selectedRowKeys;
    },
    submitInform(formName) {
      //表单提交
      this.loading = true;
      this.$refs[formName].validate(valid => {
        if (!valid) {
          this.loading = false;
          return false;
        }
      });
    },
    storage(formName) {
      alert("关闭");
    }
  }
};
</script>
<style lang="stylus" scoped>
.recovery {
  a.detail {
    color: #66b1ff;
  }

  a.detail:hover {
    text-decoration: underline;
  }
}
</style>